<template>
  <!-- 输入框 -->
  <div class="mb-10">
    <el-row :gutter="10">
      <el-col :span="24" :md="10" :lg="10" :xl="10">
        <el-row>
          <el-col :span="12">
            <el-input
              v-model.trim="name"
              placeholder="请输入角色名称"
              suffix-icon="Search"
              @keyup.enter="load"
              @keyup.esc="name = ''"
            />
          </el-col>
          <el-col :span="12">
            <el-button class="ml-5" type="primary" @click="load"
              >搜索</el-button
            >
            <el-button type="primary" @click="clears">重置</el-button>
          </el-col></el-row
        ></el-col
      ></el-row
    >
  </div>

  <!-- 按钮 -->
  <div class="m1-10 df">
    <el-button type="primary" @click="handleadd"
      >新增<el-icon class="ml-5" size="20px"><CirclePlus /></el-icon
    ></el-button>
    <el-popconfirm
      width="220"
      confirm-button-text="确定"
      cancel-button-text="我再想想"
      icon="InfoFilled"
      icon-color="red"
      title="您确定批量删除这些数据吗?"
      @confirm="delBatch"
      ><template #reference>
        <el-button type="danger"
          >批量删除<el-icon class="ml-10" size="20px"><Remove /></el-icon
        ></el-button> </template
    ></el-popconfirm>
  </div>

  <!-- 表单 -->
  <div class="role_table">
    <!--selection-change 当选择项发生变化时会触发该事件 -->
    <el-table
      :data="tableData"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="id" fixed="left" width="80" />
      <el-table-column prop="name" label="角色名字" width="120" />
      <el-table-column prop="remark" label="角色权限" width="120" />
      <el-table-column prop="flag" label="唯一标识" width="200" />

      <el-table-column label="操作" min-width="350px">
        <template v-slot:default="scope">
          <el-button type="primary" @click="handleMenu(scope.row)"
            >分配菜单<el-icon class="ml-5"><Menu /></el-icon
          ></el-button>
          <el-button type="success" @click="handleEdit(scope.row)"
            >编辑<el-icon class="ml-5"><Edit /></el-icon
          ></el-button>

          <!-- 气泡确认框 删除确认框 -->
          <el-popconfirm
            width="220"
            confirm-button-text="确定"
            cancel-button-text="我再想想"
            icon="InfoFilled"
            icon-color="red"
            title="您确定删除吗?"
            @confirm="del(scope.row.id)"
          >
            <template #reference>
              <el-button type="danger"
                >删除<el-icon class="ml-5"><Delete /></el-icon
              ></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!-- 分页 -->
  <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="pageNum"
      v-model="pageSize"
      :page-sizes="[2, 5, 10, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :small="small"
      :disabled="disabled"
      :background="background"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>

  <!-- 弹窗 -->
  <el-dialog v-model="dialogFormVisible" title="用户信息" width="30%">
    <el-form :label-width="formLabelWidth">
      <el-form-item label="角色名称">
        <el-input
          v-model.trim="form.name"
          autocomplete="off"
          placeholder="请输入角色名"
        />
      </el-form-item>
      <el-form-item label="描述">
        <el-input
          v-model.trim="form.remark"
          autocomplete="off"
          placeholder="请输入描述"
        />
      </el-form-item>
      <el-form-item label="唯一标识">
        <el-input
          v-model.trim="form.flag"
          autocomplete="off"
          placeholder="请输入唯一标识"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save_info"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 分配菜单 -->
  <el-dialog v-model="dialogFormVisibleMenu" title="分配菜单" width="30%">
    <el-tree
      :props="props"
      :data="menudata"
      node-key="id"
      ref="tree"
      :default-expanded-keys="expends"
      :default-checked-keys="checked"
      show-checkbox
    >
      <template #default="{ data }">
        <span class="custom-tree-node" style="vertical-align: middle">
          <span
            class="iconfont"
            :class="data.icon"
            style="font-size: 14px,text-align:center"
            v-if="searchicon(data.icon)"
          ></span>
          <component
            :is="data.icon"
            style="width: 14px; vertical-align: middle"
            v-else
          ></component>
          <span class="ml-5">{{ data.title }}</span>
        </span>
      </template>
    </el-tree>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save_menu"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
  
  <script>
export default {
  // name: 'pagination-modul',
  name: 'role-tables',
  data() {
    return {
      tableData: [],
      //   分页器
      pageNum: 1,
      pageSize: 10,
      small: false,
      disabled: false,
      background: false,
      total: 0,

      // 分页查询-输入框
      name: '',

      // 弹窗
      dialogFormVisible: false,
      dialogFormVisibleMenu: false,
      formLabelWidth: '80px',

      form: {
        // name: '',
        // remark: ''
      },
      // 批量删除
      multipleSelection: [],

      //树形菜单
      menudata: [],

      props: {
        label: 'title' //menu对应的菜单名称 tile
      },

      //伸缩
      expends: [],
      //被选择
      checked: [],

      //菜单id
      roleId: 0,
      arr: {},
      roleFlag: ''
    }
  },
  created() {
    // 请求分页查询的数据
    this.load()
  },
  methods: {
    // 分页
    handleSizeChange(pageSize) {
      console.log('页数:' + pageSize)
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      console.log('每页的数据：' + pageNum)
      this.pageNum = pageNum
      this.load()
    },

    // 请求分页查询的数据
    load() {
      console.log(this.tab)

      this.$http
        .get('/role/page', {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            name: this.name
          }
        })
        .then((res) => {
          console.log('分页类型' + typeof res)
          console.log(res)
          this.tableData = res.data.records
          this.total = res.data.total
        })
    },
    // 重置
    clears() {
      this.name = ''
      this.phone = ''
      this.load()
    },
    // 弹窗
    handleadd() {
      this.dialogFormVisible = true
      this.form = {}
    },
    // 新增数据
    save_info() {
      var b = JSON.stringify(this.form)
      if (b != '{}') {
        this.$http.post('/role', this.form).then((res) => {
          console.log(res)
          if (res.status == '200') {
            this.$message.success('保存成功')
            this.dialogFormVisible = false
            // 刷新页面数据
            this.load()
          }
        })
      } else {
        this.$message.error('保存失败')
      }
    },
    // 编辑
    handleEdit(row) {
      console.log(row)
      // 当前的值赋予到form对象中
      // row是proxy 需要转化为json
      this.form = JSON.parse(JSON.stringify(row))
      console.log(this.form)
      // this.handleTest(row)
      // this.form = JSON.parse(JSON.stringify(row));
      // 打开弹窗
      this.dialogFormVisible = true
    },

    // 删除
    del(id) {
      this.$http.delete('/role/' + id).then((res) => {
        console.log(res)
        if (res.data) {
          this.$message.success('删除成功')
          // 刷新页面数据
          this.load()
        } else {
          this.$message.error('删除失败')
        }
      })
    },
    // 批量删除
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },
    delBatch() {
      // 对象数组变成 纯id的数组
      let ids = this.multipleSelection.map((v) => v.id) //[{},{},{}]=>[1,2,3]
      console.log(ids)

      this.$http.delete('/role/del/batch', { data: ids }).then((res) => {
        console.log(res)

        if (res.data) {
          this.$message.success('批量删除成功')
          // 刷新页面数据
          this.load()
        } else {
          this.$message.error('批量删除失败')
        }
      })
    },

    myclear() {
      console.log('清理中')
    },

    //分配菜单
    handleMenu(role) {
      console.log(role)
      // 打开弹窗
      this.dialogFormVisibleMenu = true
      this.roleId = role.id
      this.roleFlag = role.flag
      //请求菜单数据
      this.$http.get('/menu').then((res) => {
        console.log(res)
        this.menudata = res.data
        //后台数据处理成 id数组 实现动态全部展开
        this.expends = this.menudata.map((v) => v.id)
        console.log(this.expends)
      })

      this.$http.get('/role/roleMenu/' + this.roleId).then((res) => {
        console.log(res)
        this.checked = res.data
      })
    },
    // 分配菜单
    // handleCheckChange(data, checked, indeterminate) {
    //   console.log(data, checked, indeterminate)
    // },
    searchicon(values) {
      // console.log(values)
      if (values) {
        return values.startsWith('icon-')
      }
    },

    //分配菜单保存
    save_menu() {
      // console.log(this.$refs.tree.getCheckedNodes())
      // console.log(this.$refs.tree.getCheckedKeys())
      // console.log(this.$refs.tree.getHalfCheckedKeys());
      // console.log(this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys()))

      this.$http
        .post('/role/roleMenu/' + this.roleId, this.$refs.tree.getCheckedKeys())
        .then((res) => {
          if (res.status === '200') {
            this.$message.success('绑定成功')
            //操作管理员角色后需要重新登录
            if (this.roleFlag === 'ROLE_ADMIN') {
              this.$store.commit('logout')
            }
            this.dialogFormVisibleMenu = false
          } else {
            this.$message.error(res.msg)
          }
          console.log(res)
        })
    }
  }
}
</script>
  
  <style lang="less" scoped>
// 分页
.demo-pagination-block {
  padding: 10px;
}
.upload_file {
  margin: 0 12px;
}
// 弹窗
</style>